<html>
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style type="text/css">
        #BJ{            /*图片居中 */
             text-align: center;     
        }
        #img{           /*图片宽度，高度 */
            width: 1280px;
            height: 690px;
        }
        #ol{
            position: absolute;    /* 绝对定位 */
            bottom: 85px;       /* 高度 */
            width: 100%;        /* 宽度 */
            text-align: center;  /* 居中*/
            right: 15px;
        }
    </style>
</head>
<script type="text/javascript">
//图片自动切换部分：
    var index=0;
    var imgs=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"]; /*图片的地址 */
    function qiehuan(){
        document.getElementById("img").src=imgs[index];
        index++;
        if(index > 3){
            index=0;    //只有四张图片，当为3的时候重置为0
        }
    }
  setInterval("qiehuan()",1000);  //每3秒重新运行函数qiehuan()


//图片点击切换部分：
        window.onload = function () {
        //获取四张图片id
        var c1 = document.getElementById("clk1");
        var c2 = document.getElementById("clk2");
        var c3 = document.getElementById("clk3");
        var c4 = document.getElementById("clk4");

        //点击相应按钮，则显示相应图片
        c1.οnclick=function() {
            document.getElementById("img").src=imgs[0];
        }
        c2.οnclick=function() {
            document.getElementById("img").src=imgs[1];
        }
        c3.οnclick=function() {
            document.getElementById("img").src=imgs[2];
        }
        c4.οnclick=function() {
            document.getElementById("img").src=imgs[3];
        }
    }
</script>
<body>
    <div>
        <div id="BJ">
            <img src="images/1.jpg" id="img" />
        </div>
        <ul id="ol">
                        <!--设置图片为一行 ；设置图片间隔 -->
        <li style="display: inline-block;margin: 0 5px;"><img src="./sanzhong.png" id="clk1"></li>  
        <li style="display: inline-block;margin: 0 5px;"><img src="./sanzhong.png" id="clk2"></li>
        <li style="display: inline-block;margin: 0 5px;"><img src="./sanzhong.png" id="clk3"></li>
        <li style="display: inline-block;margin: 0 5px;"><img src="./sanzhong.png" id="clk4"></li>
        </ol>
    </div>
</body>
</html>
